@charset "utf-8";
@import "./mixins";

.input-append {
  @extend %clearfix;

  input[type="text"], input[type="email"], input[type="password"] {
    float: left;
    border-right: 0;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 10px 15px;
    height: 40px;

    width: 14rem;
    &[size="3"] {
      width: 2rem;
    }
    &[size="4"] {
      width: 3rem;
    }
    &[size="6"] {
      width: 5rem;
    }
  }

  .addon {
    display: block;
    float: left;
    width: 30px;
    height: 40px;
    padding: 10px 0;
    font-size: 1em;
    background-color: $grayBlueColor;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }

  .addon:before {
    content: " ";
    display: block;
    width: 30px;
    font-size: 1.2em;
    text-align: center;
  }

  &.required .addon:before {
    padding-top: 0.25em;
    content: "*";
  }

  &.valid .addon:before {
    padding-top: 0;
    content: "✓";
  }

  &.invalid .addon:before {
    padding-top: 0;
    cursor: help;
    content: "×";
  }
}

